<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            width: 100%;
            height: 80px;
            font-size:30px;
            margin: 0 100px;
        }
        .zj{
            margin-top:200px ;
        }
        .zj1{
            width: 380px;
            height: 263px;
            margin: 0 auto;
            margin-top: 30px;
        }
        .zj1-labe{
            position: absolute;
            line-height: 36px;
        }
        .number{
            width: 308px;
            height: 34px;
            margin-left: 70px;
            border: 1px solid #d6d6d6;
            line-height: 34px;
        }
        .number1{
            margin-left: 10px;
            width: 117px;
            height: 34px;
            border-right-color: rgb(214, 214, 214);
            border-right-style: solid;
            border-right-width: 1px;
            float: left;
        }
        .number2{
            width: 180px;
            height:27px;
            float: left;
        }
        .number2 input{
            border: 0;
            width:160px;
            outline: none;
            margin-left: 3px;
        }
        font{
            font-size: 10px;
        }
        .jw{
            margin: auto;
            width: 990px;
            height: 136px;
            border-top: 1px solid #ddd;
        }
        .jw1{
            width: 990px;
            height: 35px;
            margin-top: 8px;
            border-bottom: 1px solid #ddd;
        }
        .jw1 a{
            color: #6C6C6C;
            text-decoration: none;
        }
        .jw1 a:hover{
            color: #ff5000;
        }
        p{
            text-align: center;
        }
        .jw2{
            margin-top: 8px;
            width: 990px;

            height: 29px;
        }
        .jw2 a{
            color: #6C6C6C;
            text-decoration: none;
        }
        .jw2 a:hover{
            color: #ff5000;
        }
        .jw3{
            margin-top: 8px;
            width: 990px;

            height: 29px;
        }
        .jw3 a{
            color: #6C6C6C;
            text-decoration: none;
        }
        .jw3 a:hover{
            color: #ff5000;
        }
        .zj2-item2{
            width: 380px;
            height: 36px;
            margin-top: 20px;
        }
        .zj2-labe2{
            position: absolute;
            line-height: 36px;
            margin-left: 16px;
        }
        .number3 input{
            width: 220px;
            height: 22.5px;
            outline: none;
            border: 0;
            margin-top: 5px;
            float: left;
            margin-left: 3px;
        }
        .number4 button{
            width: 80px;
            height: 30px;
            margin-top: 2px;
            float: left;
            background-color:transparent;
            border-style:none;
            color:orange;
        }
        .zj3-item3{
            width: 300px;
            height: 36px;
            margin-top: 30px;
            margin-left: 80px;
            text-align:center;
            line-height: 36px;
            background-color: orangered;
        }
        .zj4{
            margin-top: 15px;
            margin-left: 60px;
            font-size: 12px;
        }
        .zj4 a{
            color:#ff5000;
            text-decoration:none;
        }
    </style>
</head>
<body>
    <div class="top">
        <img src="tb.png" alt="" height="90px">用户注册
    </div>
    <div class="zj">
        <div class="zj1">
            <div class="zj1-item1">
                 <label class="zj1-labe">手机号码</label>
                     <div class="number">
                         <div class="number1">
                             <span>中国大陆</span>
                             <span>+86</span>
                             <img src="xl.png" alt="">
                         </div>
                         <div class="number2">
                         <input type="te1" value="" id="fname">
                         </div>
                     </div>
             </div>
             <div class="zj2-item2">
                <label class="zj2-labe2">验证码</label>
                    <div class="number">
                            <div class="number3">
                                <input type="te2" value="">
                            </div>
                            <div class="number4">
                                <button type="button" onclick="myFunction(fname.value)" id="fl">获取验证码</button>
                            </div>
                    </div>
            </div>
            <div class="zj3-item3">
                <a><font color="#FFFFFF">同意协议并注册</font></a>
            </div>
            <div class="zj4">
                <p>
                    <font color:#999;>已阅读并同意以下协议</font>
                    <a href="">淘宝平台服务协议</a>、
                    <a href="">淘宝平台服务协议</a>、
                    <a href="">淘宝平台服务协议</a>、
                    <a href="">淘宝平台服务协议</a>
                </p>
            </div>
        </div>
        
    </div>
    <div class="jw">
        <div class="jw1">
            <p>
                <a href="">阿里巴巴</a>
            丨
            <a href="">全球速卖通</a>
            丨
            <a href="">淘宝网</a>
            丨
            <a href="">天猫</a>
            丨
            <a href="">聚划算</a>
            丨
            <a href="">一淘</a>
            丨
            <a href="">阿里妈妈</a>
            丨
            <a href="">阿里云计算</a>
            丨
            <a href="">云OS</a>
            丨
            <a href="">万网</a>
            丨
            <a href="">支付宝</a>
            </p>
        </div>
        <div class="jw2">
            <p>
                <a href="">关于淘宝</a>
                <a href="">合作伙伴</a>
                <a href="">营销中心</a>
                <a href="">开放平台</a>
                <a href="">诚征英才</a>
                <a href="">联系我们</a>
                <a href="">网站地图</a>
                <a href="">
                    法律声明及隐私权政策
                    </a>
                    <a href="">
                        © 2021 Taobao.com 版权所有</a>
            </p>
        </div>
        <div class="jw3">
            <a href="">网络文化经营许可证：文网文[2010]040号
            </a>|<a href="">
                增值电信业务经营许可证：浙B2-20080224-1</a>|<a href="">信息网络传播视听节目许可证：1109364号</a>
        </div>
    </div>
    <script>
        function myFunction(fname){
       if(null == fname || "" == fname || undefined == fname){
           alert("请输入手机号！");
       }else{
           var RegCellPhone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
           var  falg=fname.search(RegCellPhone);
           var maxtime = 60; 
           var fl=document.querySelector("#fl")
           if (falg==-1){
               alert("手机号格式不正确");
           }else{
            fl.disabled=true
                    var timeFlag=setInterval(function(){
                    if(maxtime > 0) {
                        fl.innerHTML ="重新发送" +maxtime + "s";
                            maxtime--;
                        } else {
                            clearInterval(timeFlag);
                            fl.disabled = false;
                            fl.innerHTML = "重新发送";
                            maxtime = 30;
                        }
                    },1000);
           }
    
    }
    }
        </script>
</body>
</html>

